<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/home/css/mui.min.css"  />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css"  />
    <link rel="stylesheet" href="/assets/home/css/team.css" />
    <title>我的团队</title>
    <link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css" />
    
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>


</head>
<body>
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search search wow">
        <input type="search" placeholder="请输入客户名称" name="search" />
    </div>

    <div class="mescroll"  id="box">
        <div class="list">
        </div>
    </div>
</body>
</html>
<script>
    var keyword = ''
    $("input[name='search']").change(function(){
        // var keyword = $(this).val()
        // $.post('/home/center/team',{keyword})
        // .then((data)=>{
        //     // $('.list').append()
        // })
        keyword = $(this).val()
        downCallback()
    })
    
    var mescroll = new MeScroll("box", { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
        //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback, //上拉加载的回调
            isBounce: false, 
            //以下是一些常用的配置,当然不写也可以的.
            page: {
                num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                size: 3 //每页数据条数,默认10
            },
            htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
            noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
                    // 避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
                    // 这就是为什么无更多数据有时候不显示的原因.
            toTop: {
                //回到顶部按钮
                src: "/assets/home/plugin/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
                offset: 100, //列表滚动1000px才显示回到顶部按钮	
                duration: 300,
                supportTap : true, //快速响应
            },
            empty: {
                //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
                warpId:	"box", //父布局的id (1.3.5版本支持传入dom元素)
                // icon: "../img/mescroll-empty.png", //图标,默认null,支持网络图
                tip: "暂无相关数据~" //提示
            },
            // lazyLoad: {
            //         use: true, // 是否开启懒加载,默认false
            //         attr: 'imgurl' // 标签中网络图的属性名 : <img imgurl='网络图  src='占位图''/>
            //     }
        }
    });
                //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        $('#box .list').empty()
        mescroll.resetUpScroll()
        
        // 处理方式二: 单独处理下拉刷新的逻辑
        // var keyword = $("input[name='search']").val()
        // $.post('/home/center/team',{keyword})
        // .then((data)=>{
        //     //联网成功的回调,隐藏下拉刷新的状态;
        //     mescroll.endSuccess(); //无参. 注意结束下拉刷新是无参的
        //     //设置数据
        //     //setXxxx(data);//自行实现 TODO
        // },(jqXHR)=>{
        //     //联网失败的回调,隐藏下拉刷新的状态
        //     mescroll.endErr();
        // })
    }
        		//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    function upCallback(page) {
        var pageNum = page.num; // 页码, 默认从1开始 如何修改从0开始 ?
        var pageSize = page.size; // 页长, 默认每页10条
        $.post('/home/center/team',{pageNum,pageSize,keyword})
        .then((data)=>{
            var curPageData = data.curPageData; // 接口返回的当前页数据列表
            var totalPage = data.totalPage; // 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
            var totalSize = data.totalSize; // 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
            var hasNext = data.hasNext; // 接口返回的是否有下一页 (true/false)

            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
            //列表如果无下一页数据,则提示无更多数据,(注意noMoreSize的配置)
            
            //方法一(推荐): 后台接口有返回列表的总页数 totalPage
            //必传参数(当前页的数据个数, 总页数)
            mescroll.endByPage(curPageData.length, totalPage);
                    
            //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
            //必传参数(当前页的数据个数, 总数据量)
            //mescroll.endBySize(curPageData.length, totalSize);
                    
            //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
            //必传参数(当前页的数据个数, 是否有下一页true/false)
            //mescroll.endSuccess(curPageData.length, hasNext);
                    
            //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.
            //如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
            //如果传了hasNext,则翻到第二页即可显示无更多数据.
            //mescroll.endSuccess(curPageData.length);
            
            //curPageData.length必传的原因:
            // 1. 使配置的noMoreSize 和 empty生效
            // 2. 判断是否有下一页的首要依据: 
            //    当传的值小于page.size时(说明不满页了),则一定会认为无更多数据;
            //    比传入的totalPage, totalSize, hasNext具有更高的判断优先级;
            // 3. 当传的值等于page.size时,才会取totalPage, totalSize, hasNext判断是否有下一页
            // 传totalPage, totalSize, hasNext目的是避免方法四描述的小问题
            
            // 设置列表数据 自行实现 TODO
            if(page.num == 1) $('#box .list').empty() // 第一页,先置空,再追加
            setListData(curPageData);
        },
        (e)=>{
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态
            mescroll.endErr();
        })
    }
    function setListData(curPageData){
        teamHtml = ''
        for(var [i,data] of curPageData.entries()){
            // console.log(data)
            teamHtml += `<div class="item wow" data-wow-delay="${i%3+1}00ms">
                    <div class="avatar">
                        <img src="${data.avatar_text}" alt="">
                    </div>
                    <div class="info">
                        <div class="name">${data.nickname}</div>
                        <div class="type">性别:${data.gender_text}</div>
                        <div class="time">加入时间：${data.date}</div>
                    </div>
                </div>`
        }
        $('#box .list').append(teamHtml)
    }
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: "#box" // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>